import React from 'react'
import {convertTextElm} from '../../utils.js'

const Editor = ({isEditing, focus, pages}) => {

    let style = {}

    if (isEditing && focus) {
        style.display = 'block'

        let [p, e] = focus.split('.')
        , elm = pages[p].elements[e]
        , css = elm.css

        console.log(convertTextElm(elm))

        style.top = `${parseInt(css.top) * SCALE}px`
    }

    return (
        <div className="am-btn-group am-btn-group-xs toolbar" style={style}>
            <select data-am-selected="{btnWidth: '40', btnSize: 'xs', btnStyle: 'secondary'}" defaultValue="a">
                <option value="a">微软雅黑</option>
                <option value="b">宋体</option>
            </select>
            <select data-am-selected="{btnWidth: '40', btnSize: 'xs', btnStyle: 'secondary'}" defaultValue="16">
                <option value="12">12</option>
                <option value="14">14</option>
                <option value="16">16</option>
                <option value="18">18</option>
                <option value="20">20</option>
                <option value="22">22</option>
            </select>
            <button className="am-btn am-btn-default am-radius">左手 xs</button>
            <button className="am-btn am-btn-default am-radius">左手 xs</button>
        </div>
    )
}

export default Editor